import React from 'react';
import { DownOutlined, UpOutlined } from '@ant-design/icons';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Input, Button, Row, Col, DatePicker, Card } from 'antd';
import Area from '../../components/Area';
import Customer from '../../components/Customer';
import styles from '../../../utils/utils.less';
import DictCode from '../../components/DictCode';
import SearchPersonEs from '../../components/SearchPersonEs';

const { RangePicker } = DatePicker;
const FormItem = Form.Item;
@Form.create()
class renderFrom extends React.Component {
  state = {};

  tableSearchLayout = {
    labelCol: { md: { span: 7 } },
    wrapperCol: { md: { span: 17 } },
  };

  componentDidMount() {}

  getList = () => {
    const { getList, activeKey, pageOrdBys } = this.props;
    getList(activeKey, pageOrdBys);
  };

  toggleForm = () => {
    const { toggleForm } = this.props;
    toggleForm();
  };

  resetSearch = () => {
    const { resetSearch } = this.props;
    resetSearch();
  };

  renderSimpleForm() {
    const { getFieldDecorator, formFieldsValue } = this.props;
    return (
      <Form layout="inline">
        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
          <Col md={8} sm={24}>
            <FormItem label="姓名" {...this.tableSearchLayout}>
              {getFieldDecorator('empName', {
                initialValue: formFieldsValue.empName,
              })(<Input placeholder="请输入" />)}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <FormItem label="证件号" {...this.tableSearchLayout}>
              {getFieldDecorator('certNo', {
                initialValue: formFieldsValue.certNo,
              })(<Input placeholder="请输入" />)}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <span className={styles.submitButtons}>
              <Button type="primary" onClick={this.getList}>
                查询
              </Button>
              <Button style={{ marginLeft: 8 }} onClick={this.resetSearch}>
                重置
              </Button>
              <a style={{ marginLeft: 8 }} onClick={this.toggleForm}>
                展开 <DownOutlined />
              </a>
            </span>
          </Col>
        </Row>
      </Form>
    );
  }

  renderAdvancedForm() {
    const { getFieldDecorator, formFieldsValue, userId } = this.props;
    const dateFormat = 'YYYY-MM-DD';
    return (
      <Form layout="inline">
        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
          <Col md={8} sm={24}>
            <FormItem label="姓名" {...this.tableSearchLayout}>
              {getFieldDecorator('empName', {
                initialValue: formFieldsValue.empName,
              })(<Input placeholder="请输入" />)}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <FormItem label="证件号" {...this.tableSearchLayout}>
              {getFieldDecorator('certNo', {
                initialValue: formFieldsValue.certNo,
              })(<Input placeholder="请输入" />)}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <FormItem label="执行地" {...this.tableSearchLayout}>
              {getFieldDecorator('areaId', {
                initialValue: formFieldsValue.areaId,
              })(
                <Area
                  allowClear
                  showSearch
                  labelInValue
                  filterOption={(input, option) =>
                    option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                  }
                />
              )}
            </FormItem>
          </Col>
        </Row>
        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
          <Col md={8} sm={24}>
            <FormItem label="客户名称" {...this.tableSearchLayout}>
              {getFieldDecorator('custId', {
                initialValue: formFieldsValue.custId,
              })(
                <Customer
                  attr
                  allowClear
                  showSearch
                  filterOption={(input, option) =>
                    option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                  }
                />
              )}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <FormItem label="联系状态" {...this.tableSearchLayout}>
              {getFieldDecorator('contState', {
                initialValue: formFieldsValue.contState,
              })(
                <DictCode
                  dictType="ENTRY_CONTACT_STATE"
                  allowClear
                  showSearch
                  filterOption={(input, option) =>
                    option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                  }
                />
              )}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <FormItem label="材料状态" {...this.tableSearchLayout}>
              {getFieldDecorator('matState', {
                initialValue: formFieldsValue.matState,
              })(
                <DictCode
                  dictType="MAT_STATE"
                  allowClear
                  showSearch
                  filterOption={(input, option) =>
                    option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                  }
                />
              )}
            </FormItem>
          </Col>
        </Row>
        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
          <Col md={8} sm={24}>
            <FormItem label="申报状态" {...this.tableSearchLayout}>
              {getFieldDecorator('execState', {
                initialValue: formFieldsValue.execState,
              })(
                <DictCode
                  dictType="EXEC_STATE"
                  allowClear
                  showSearch
                  filterOption={(input, option) =>
                    option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                  }
                />
              )}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <FormItem label="办理人" {...this.tableSearchLayout}>
              {getFieldDecorator('tskId', {
                rules: [{ required: false }],
                initialValue: formFieldsValue.tskId || userId,
              })(
                <SearchPersonEs
                  allowClear
                  showSearch
                  filterOption={(input, option) =>
                    option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                  }
                />
              )}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <FormItem label="所属客服" {...this.tableSearchLayout}>
              {getFieldDecorator('creId', {
                initialValue: formFieldsValue.creId,
              })(
                <SearchPersonEs
                  allowClear
                  showSearch
                  filterOption={(input, option) =>
                    option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                  }
                />
              )}
            </FormItem>
          </Col>
        </Row>
        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
          <Col md={8} sm={24}>
            <FormItem label="时间" {...this.tableSearchLayout}>
              {getFieldDecorator('dateArr', {
                rules: [{ type: 'array' }],
                initialValue: formFieldsValue.dateArr,
              })(
                <RangePicker
                  format={dateFormat}
                  placeholder={['开始时间', '结束时间']}
                  style={{ width: '100%' }}
                />
              )}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <FormItem label="服务类型" {...this.tableSearchLayout}>
              {getFieldDecorator('contTypes', {
                rules: [{ required: false }],
                initialValue: formFieldsValue.contTypes,
              })(
                <DictCode
                  allowClear
                  showSearch
                  mode="multiple"
                  filterOption={(input, option) =>
                    option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                  }
                  dictType="CONT_TYPE"
                />
              )}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <div style={{ overflow: 'hidden' }}>
              <div style={{ float: 'right', marginBottom: 24 }}>
                <Button type="primary" onClick={this.getList}>
                  查询
                </Button>
                <Button style={{ marginLeft: 8 }} onClick={this.resetSearch}>
                  重置
                </Button>
                <a style={{ marginLeft: 8 }} onClick={this.toggleForm}>
                  收起
                  <UpOutlined />
                </a>
              </div>
            </div>
          </Col>
        </Row>
      </Form>
    );
  }

  renderForm() {
    const { expandForm } = this.props;
    return expandForm ? this.renderAdvancedForm() : this.renderSimpleForm();
  }

  render() {
    return (
      <Card className={styles.searchCard}>
        <div className={styles.tableListForm}>{this.renderForm()}</div>
      </Card>
    );
  }
}
export default renderFrom;
